<!-- 分析页 -->
<template>
  <div class="analysis">
    <form action="/" class="search-form">
      <van-search
        v-model="keyword"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
      />
    </form>
    <div class="memu-main">
      <div>
        <router-link to="/monthlyReport">
          <div class="item">
            <img src="../../assets/images/icon/bussiness.png" alt="" srcset="" />
            <span>资本月报</span>
          </div></router-link
        >
        <router-link to="/humanAnalysis">
          <div class="item">
            <img src="../../assets/images/icon/hr.png" alt="" srcset="" />
            <span>人力分析</span>
          </div></router-link
        >
      </div>
      <div>
        <router-link to="/recruitAnalysis"
          ><div class="item">
            <img src="../../assets/images/icon/zhaopin.png" alt="" srcset="" />
            <span>招聘分析</span>
          </div></router-link
        >
        <router-link to="/talentAnalysis"
          ><div class="item">
            <img src="../../assets/images/icon/rencai.png" alt="" srcset="" />
            <span>人才分析</span>
          </div></router-link
        >
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, onBeforeMount, onMounted } from "vue";
import { Toast } from "vant";
export default {
  name: "analysis",
  setup() {
    const data = reactive({
      keyword: "", //搜索关键词
    });
    onBeforeMount(() => {});
    onMounted(() => {});
    const onSearch = (val) => Toast(val);
    const onCancel = () => Toast("取消");
    const refData = toRefs(data);
    return {
      ...refData,
      onSearch,
      onCancel,
    };
  },
};
</script>
<style scoped lang="scss">
.analysis {
  height: 93vh;
  .item {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    padding: 20px;
    margin: 20px;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    box-shadow: 2px 1px 1px 1px rgba(14, 19, 39, 0.4);
    img {
      width: 50px;
      height: 50px;
    }
  }
  .search-form {
    ::v-deep {
      .van-search {
        height: 50px;
      }
    }
  }
  .memu-main {
    height: calc(100% - 50px - 40px);
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
